<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id='app'>
        <h1>注册</h1>
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="80px">
            <el-form-item label="手机号" prop="user_id">
                <el-input v-model="dataForm.userId" placeholder="手机号" @blur="phone"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="nickname">
                <el-input v-model="dataForm.nickname" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="dataForm.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="head">
                <!-- <el-input v-model="dataForm.head" placeholder="头像"></el-input> -->
                <el-upload action="http://localhost:88/api/user/user/upload" class="upload-demo"
                    :on-success="uploadFile" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    baseurl: "http://localhost:88/api",
                    visible: false,
                    dataForm: {
                        userId: '',
                        nickname: '',
                        password: '',
                        salt: '',
                        head: '',
                        registerDate: '',
                        lastLoginDate: '',
                        loginCount: ''
                    },
                    dataRule: {
                        nickname: [
                            { required: true, message: '不能为空', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '不能为空', trigger: 'blur' }
                        ],
                    },
                    fileList: [],

                }
            },
            //方法集合
            methods: {

                //失焦事件，验证手机号格式
                phone() {
                    var tt = /^(1)\d{10}$/
                    if (!tt.test(this.dataForm.userId)) {
                        alert("手机号格式不正确")
                    }


                },
                //图片上传
                uploadFile(obj) {
                    this.dataForm.head = obj.url

                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview(file) {
                    console.log(file);
                },
                // 表单提交
                dataFormSubmit() {
                    this.$refs['dataForm'].validate((valid) => {
                        if (valid) {
                            axios({
                                url: `${this.baseurl}/user/user/regist`,
                                method: 'post',
                                data: ({
                                    'userId': this.dataForm.userId,
                                    'nickname': this.dataForm.nickname,
                                    'password': this.dataForm.password,
                                    'salt': this.dataForm.salt,
                                    'head': this.dataForm.head,
                                    'registerDate': this.dataForm.registerDate,
                                    'lastLoginDate': this.dataForm.lastLoginDate,
                                    'loginCount': this.dataForm.loginCount
                                })
                            }).then(({ data }) => {
                                if (data && data.code === 0) {
                                    this.$message({
                                        message: '操作成功',
                                        type: 'success',
                                        duration: 1500,
                                        onClose: () => {
                                            this.visible = false
                                            this.$emit('refreshDataList')
                                        }
                                    })
                                    this.$message({
                                        message: '恭喜你，这是一条成功消息',
                                        type: 'success'
                                    });
                                    location = "./index.html"
                                } else {
                                    this.$message.error(data.msg)
                                }
                            })
                        }
                    })
                }

            },
            created() {

            },
        })
    </script>
</body>

</html>